<template>
  <view>
    <fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
      <block slot="content">{{$t('选择区域')}}</block>
      <block slot="right">
        <view class="text-df" @click.stop="submit" style="color: #0181FF;">{{$t('确定')}}</view>
      </block>
    </fu-custom>
    <view class="flex text-df container">
      <view class="container-left">
        <view class="items" :class="chooseId==item.aid ? 'active' : ''" v-for="(item,index) in dataList" :key="index" @click="choosebig(item)">
          {{item.name}}
        </view>
      </view>
      <view class="container-right">
        <view class="margin-left-sm items"  :class="chooseItemID==itemC.aid ? 'active' : ''" v-for="(itemC,indexC) in litileList" :key="indexC"  @click="chooseItem(itemC)">
          {{itemC.name}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        dataList: [],
        litileList:[],
        chooseId:'',
        chooseItemID:'',
        chooseobj:{
          name:'',
          aid:''
        },
        chooseItemobj:{
          name:'',
          aid:''
        },
        type:''
      }
    },
    onLoad(options) {
      if(options.bigId){
        this.chooseId=options.bigId
        this.chooseobj.aid=options.bigId
      }
      if(options.bigItemId){
        this.chooseItemID=options.bigItemId
        this.chooseItemobj.aid=options.bigItemId
      }
      if(options.bigName){
        this.chooseobj.name=options.bigName
      }
      if(options.bigItemName){
        this.chooseItemobj.name=options.bigItemName
      }
    console.log('areaObjareaObjareaObj',options.areaObj)
      this.getData()
    },
    methods: {
      choosebig(item){
        this.chooseId=item.aid
        this.chooseobj=item
        this.litileList=item.children
      },
      chooseItem(item){
        if(!this.chooseId){
          this.$message.info(this.$t('请先选择左边所在区域'))
          return;
        }
        this.chooseItemID=item.aid
        this.chooseItemobj=item
      },
      getData() {
        this.$api.post(global.apiUrls.post6542244679a53, {

        }).then(res => {
          this.dataList = res.data.data
          if(!this.chooseId){
            this.litileList = this.dataList[0].children
          }else{
             this.litileList = this.dataList.filter(item=>item.aid==this.chooseId)[0].children
          }
        })
      },
      submit(){
        if(!this.chooseItemID){
          this.$message.info(this.$t('请选择所在区域'))
          return;
        }
        let obj={
          bigId:this.chooseId,
          bigItemId:this.chooseItemID,
          bigName:this.chooseobj.name,
          bigItemName:this.chooseItemobj.name,
        }
        uni.$emit('areaobj', obj)
        this.$urouter.navigateBack(1);
      },
    }
  }
</script>

<style lang="scss">
  .container {
    width: 100%;
    overflow-y: scroll;
    .items{
      height: 100rpx;
      line-height: 100rpx;
      color: #333;
      &.active{
        color: #0181FF;
        background: #FFF;
      }
    }
    .container-left{
      width: 20%;
      text-align: center;

    }
    .container-right{
      background-color: #FFF;
      width: 80%;
      text-align: left;
    }
  }
</style>
